<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 游戏大厅</title>
    <link rel="stylesheet" href="common.css">
    <style>
        body {
            background: #f8f9fa;
            margin: 0;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        
        .header {
            background: #2c3e50;
            color: white;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 18px;
            font-weight: bold;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }
        
        .user-details {
            display: flex;
            flex-direction: column;
        }
        
        .username {
            font-weight: bold;
            font-size: 14px;
        }
        
        .user-score {
            font-size: 12px;
            color: #bdc3c7;
        }
        
        .logout-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .logout-btn:hover {
            background: #c0392b;
        }
        
        .main-container {
            display: flex;
            height: calc(100vh - 70px);
            align-items: flex-start;
        }
        
        .left-panel {
            width: 300px;
            background: white;
            padding: 20px;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            height: calc(100vh - 70px);
            overflow-y: auto;
        }
        
        .user-stats {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .user-stats h3 {
            color: #2c3e50;
            margin-bottom: 20px;
        }
        
        .stat-item {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #ecf0f1;
        }
        
        .stat-label {
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .stat-value {
            color: #2c3e50;
            font-weight: bold;
            font-size: 14px;
        }
        
        .score-history-btn {
            width: 100%;
            background: #3498db;
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 20px;
        }
        
        .score-history-btn:hover {
            background: #2980b9;
        }
        
        .center-panel {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: calc(100vh - 70px);
            overflow-y: auto;
        }
        
        .game-area {
            text-align: center;
            background: white;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            max-width: 500px;
            width: 100%;
        }
        
        .game-title {
            color: #2c3e50;
            font-size: 24px;
            margin-bottom: 30px;
        }
        
        .match-btn {
            background: linear-gradient(135deg, #e67e22, #f39c12);
            color: white;
            border: none;
            padding: 20px 40px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 20px;
            min-width: 200px;
        }
        
        .match-btn:hover {
            background: linear-gradient(135deg, #d35400, #e67e22);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }
        
        .match-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .match-status {
            margin: 20px 0;
            padding: 15px;
            border-radius: 8px;
            font-size: 16px;
        }
        
        .match-waiting {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        
        .match-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .cancel-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 10px;
        }
        
        .cancel-btn:hover {
            background: #c0392b;
        }
        
        .match-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            font-size: 14px;
            color: #6c757d;
        }
        
        .right-panel {
            width: 350px;
            background: white;
            padding: 20px;
            box-shadow: -2px 0 10px rgba(0,0,0,0.1);
            height: calc(100vh - 70px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        
        .score-history {
            display: none;
            flex: 1;
            overflow-y: auto;
        }
        
        .score-history.show {
            display: flex;
            flex-direction: column;
        }
        
        .score-history-placeholder {
            text-align: center;
            color: #7f8c8d;
            padding: 40px 20px;
            font-size: 14px;
        }
        
        .score-history-placeholder.hidden {
            display: none;
        }
        
        .score-history h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-shrink: 0;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #7f8c8d;
        }
        
        .close-btn:hover {
            color: #e74c3c;
        }
        
        .history-list {
            flex: 1;
            overflow-y: visible;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        
        .history-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #ecf0f1;
            min-height: 50px;
        }
        
        .history-item:last-child {
            border-bottom: none;
        }
        
        .history-info {
            flex: 1;
        }
        
        .history-time {
            font-size: 11px;
            color: #7f8c8d;
            margin-bottom: 4px;
        }
        
        .history-opponent {
            font-size: 13px;
            color: #2c3e50;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .history-result {
            font-size: 11px;
            font-weight: bold;
        }
        
        .result-win {
            color: #27ae60;
        }
        
        .result-lose {
            color: #e74c3c;
        }
        
        .history-score {
            text-align: right;
            font-weight: bold;
            font-size: 14px;
            min-width: 40px;
        }
        
        .score-positive {
            color: #27ae60;
        }
        
        .score-negative {
            color: #e74c3c;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 15px;
            gap: 15px;
            flex-shrink: 0;
            padding: 10px 0;
            background: #f8f9fa;
            border-radius: 6px;
        }
        
        .page-info {
            font-size: 12px;
            color: #6c757d;
            font-weight: 500;
        }
        
        .page-btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .page-btn:hover {
            background: #2980b9;
        }
        
        .page-btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
        
        .footer {
            background: #34495e;
            color: white;
            padding: 10px 20px;
            text-align: center;
            font-size: 12px;
        }
        
        .online-count {
            color: #27ae60;
            font-weight: bold;
        }
        
        .announcement {
            color: #f39c12;
            margin-left: 20px;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @media (max-width: 1023px) and (min-width: 768px) {
            /* 平板端布局：两栏布局 */
            .main-container {
                flex-direction: column;
                height: auto;
            }
            
            .left-panel {
                width: 100%;
                height: auto;
                order: 1;
                padding: 15px;
            }
            
            .center-panel {
                width: 100%;
                height: auto;
                order: 2;
                padding: 20px;
            }
            
            .right-panel {
                width: 100%;
                height: auto;
                order: 3;
                padding: 15px;
                box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            }
            
            .game-area {
                padding: 30px;
            }
            
            .history-list {
                max-height: 400px;
                overflow-y: auto;
            }
        }
        
        @media (max-width: 767px) {
            /* 移动端布局：单栏布局 */
            .main-container {
                flex-direction: column;
                height: auto;
            }
            
            .left-panel, .right-panel, .center-panel {
                width: 100%;
                height: auto;
                overflow-y: visible;
            }
            
            .center-panel {
                padding: 20px;
            }
            
            .game-area {
                padding: 20px;
            }
            
            .history-list {
                max-height: 300px;
                overflow-y: auto;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>五子棋在线对战</h1>
        <div class="user-info">
            <div class="user-avatar" onclick="goToProfile()" style="cursor: pointer;" title="点击进入个人中心">U</div>
            <div class="user-details">
                <div class="username">玩家001</div>
                <div class="user-score">积分: 150</div>
            </div>
            <button id="adminBtn" class="logout-btn" onclick="goToAdmin()" style="display: none; background: #9b59b6; margin-right: 10px;">管理后台</button>
            <button class="logout-btn" onclick="logout()">退出登录</button>
        </div>
    </div>
    
    <div class="main-container">
        <div class="left-panel">
            <div class="user-stats">
                <h3>个人信息</h3>
                <div class="stat-item">
                    <span class="stat-label">用户名</span>
                    <span class="stat-value">玩家001</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">总场次</span>
                    <span class="stat-value">25</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">胜场</span>
                    <span class="stat-value">18</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">当前积分</span>
                    <span class="stat-value">150</span>
                </div>
                <button class="score-history-btn" onclick="toggleScoreHistory()">查看积分流水</button>
            </div>
        </div>
        
        <div class="center-panel">
            <div class="game-area">
                <h2 class="game-title">开始游戏</h2>
                <button id="matchBtn" class="match-btn" onclick="startMatching()">在线匹配</button>
                
                <div id="matchStatus" class="match-status hidden">
                    <div id="statusText">正在匹配中...</div>
                    <div id="waitTime">等待时间: <span id="timer">0</span>秒</div>
                    <div id="timeoutInfo" style="margin-top: 10px; font-size: 12px; color: #e67e22;">
                        匹配超时倒计时: <span id="timeoutTimer">60</span>秒
                    </div>
                    <button id="cancelBtn" class="cancel-btn" onclick="cancelMatching()">取消匹配</button>
                </div>
                
                <div class="match-info">
                    <p>系统将根据您的积分匹配相近水平的对手</p>
                    <p>匹配范围: 积分 ±50 分</p>
                </div>
            </div>
        </div>
        
        <div class="right-panel">
            <div class="score-history-placeholder" id="scoreHistoryPlaceholder">
                <p>点击"查看积分流水"按钮查看历史对局记录</p>
            </div>
            
            <div class="score-history" id="scoreHistory">
                <h3>
                    积分流水详情
                    <button class="close-btn" onclick="toggleScoreHistory()">×</button>
                </h3>
                <div class="history-list" id="historyList">
                    <!-- 历史记录将通过JavaScript动态生成 -->
                </div>
                <div class="pagination">
                    <button id="prevPageBtn" class="page-btn" onclick="changePage(-1)">上一页</button>
                    <span id="pageInfo" class="page-info">第 1 页，共 3 页</span>
                    <button id="nextPageBtn" class="page-btn" onclick="changePage(1)">下一页</button>
                </div>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <span class="online-count">在线人数: 1,234</span>
        <span class="announcement">系统公告: 欢迎来到五子棋在线对战平台！</span>
    </div>

    <script>
        let isMatching = false;
        let matchTimer = 0;
        let timerInterval;
        let timeoutTimer = 60; // 匹配超时时间60秒
        let timeoutInterval;
        let currentPage = 1;
        let recordsPerPage = 8; // 每页显示8条记录
        
        // 检查是否为管理员（模拟）
        const isAdmin = false; // 实际应从后端获取
        if (isAdmin) {
            document.getElementById('adminBtn').style.display = 'inline-block';
        }
        
        // 模拟历史数据
        const historyData = [
            { time: '2024-01-15 14:30', opponent: '玩家002', result: '胜', score: '+5' },
            { time: '2024-01-15 13:45', opponent: '玩家003', result: '负', score: '-3' },
            { time: '2024-01-15 12:20', opponent: '玩家004', result: '胜', score: '+5' },
            { time: '2024-01-15 11:10', opponent: '玩家005', result: '胜', score: '+5' },
            { time: '2024-01-15 10:30', opponent: '玩家006', result: '负', score: '-3' },
            { time: '2024-01-14 16:45', opponent: '玩家007', result: '胜', score: '+5' },
            { time: '2024-01-14 15:20', opponent: '玩家008', result: '胜', score: '+5' },
            { time: '2024-01-14 14:15', opponent: '玩家009', result: '负', score: '-3' },
            { time: '2024-01-14 13:30', opponent: '玩家010', result: '胜', score: '+5' },
            { time: '2024-01-14 12:45', opponent: '玩家011', result: '胜', score: '+5' }
        ];
        
        // 计算总页数
        let totalPages = Math.ceil(historyData.length / recordsPerPage);
        
        function startMatching() {
            if (isMatching) return;
            
            isMatching = true;
            matchTimer = 0;
            
            document.getElementById('matchBtn').disabled = true;
            document.getElementById('matchBtn').textContent = '匹配中...';
            document.getElementById('matchBtn').classList.add('pulse');
            document.getElementById('matchStatus').classList.remove('hidden');
            
            // 开始计时
            timerInterval = setInterval(() => {
                matchTimer++;
                document.getElementById('timer').textContent = matchTimer;
            }, 1000);
            
            // 开始超时倒计时
            timeoutTimer = 60;
            timeoutInterval = setInterval(() => {
                timeoutTimer--;
                document.getElementById('timeoutTimer').textContent = timeoutTimer;
                if (timeoutTimer <= 0) {
                    // 匹配超时，自动取消
                    cancelMatching();
                    alert('匹配超时，已自动取消匹配');
                }
            }, 1000);
            
            // 模拟匹配成功（5-15秒）
            const matchTime = Math.random() * 10 + 5;
            setTimeout(() => {
                if (isMatching) {
                    matchSuccess();
                }
            }, matchTime * 1000);
        }
        
        function cancelMatching() {
            isMatching = false;
            clearInterval(timerInterval);
            clearInterval(timeoutInterval);
            
            document.getElementById('matchBtn').disabled = false;
            document.getElementById('matchBtn').textContent = '在线匹配';
            document.getElementById('matchBtn').classList.remove('pulse');
            document.getElementById('matchStatus').classList.add('hidden');
        }
        
        function matchSuccess() {
            isMatching = false;
            clearInterval(timerInterval);
            clearInterval(timeoutInterval);
            
            document.getElementById('statusText').textContent = '匹配成功！正在进入游戏...';
            document.getElementById('statusText').className = 'match-success';
            document.getElementById('cancelBtn').style.display = 'none';
            
            // 模拟跳转到游戏房间
            setTimeout(() => {
                window.location.href = 'game-room.html';
            }, 2000);
        }
        
        function goToProfile() {
            window.location.href = 'profile.html';
        }
        
        function goToAdmin() {
            window.location.href = 'admin.html';
        }
        
        function toggleScoreHistory() {
            const scoreHistory = document.getElementById('scoreHistory');
            const placeholder = document.getElementById('scoreHistoryPlaceholder');
            
            if (scoreHistory.classList.contains('show')) {
                // 隐藏积分流水，显示占位符
                scoreHistory.classList.remove('show');
                placeholder.classList.remove('hidden');
            } else {
                // 显示积分流水，隐藏占位符
                scoreHistory.classList.add('show');
                placeholder.classList.add('hidden');
                loadHistoryData();
            }
        }
        
        function loadHistoryData() {
            const historyList = document.getElementById('historyList');
            const startIndex = (currentPage - 1) * recordsPerPage;
            const endIndex = startIndex + recordsPerPage;
            const pageData = historyData.slice(startIndex, endIndex);
            
            historyList.innerHTML = '';
            
            // 显示当前页的数据
            pageData.forEach(item => {
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                
                const resultClass = item.result === '胜' ? 'result-win' : 'result-lose';
                const scoreClass = item.score.startsWith('+') ? 'score-positive' : 'score-negative';
                
                historyItem.innerHTML = `
                    <div class="history-info">
                        <div class="history-time">${item.time}</div>
                        <div class="history-opponent">对手: ${item.opponent}</div>
                        <div class="history-result ${resultClass}">${item.result}</div>
                    </div>
                    <div class="history-score ${scoreClass}">${item.score}</div>
                `;
                
                historyList.appendChild(historyItem);
            });
            
            // 如果当前页记录不足，添加空记录占位
            const remainingSlots = recordsPerPage - pageData.length;
            for (let i = 0; i < remainingSlots; i++) {
                const emptyItem = document.createElement('div');
                emptyItem.className = 'history-item';
                emptyItem.style.opacity = '0.3';
                emptyItem.innerHTML = `
                    <div class="history-info">
                        <div class="history-time">-</div>
                        <div class="history-opponent">-</div>
                        <div class="history-result">-</div>
                    </div>
                    <div class="history-score">-</div>
                `;
                historyList.appendChild(emptyItem);
            }
            
            document.getElementById('pageInfo').textContent = `第 ${currentPage} 页，共 ${totalPages} 页 (${historyData.length} 条记录)`;
            updatePaginationButtons();
        }
        
        function changePage(direction) {
            const newPage = currentPage + direction;
            if (newPage >= 1 && newPage <= totalPages) {
                currentPage = newPage;
                loadHistoryData();
                updatePaginationButtons();
            }
        }
        
        function updatePaginationButtons() {
            const prevBtn = document.getElementById('prevPageBtn');
            const nextBtn = document.getElementById('nextPageBtn');
            
            if (prevBtn) {
                prevBtn.disabled = currentPage <= 1;
            }
            if (nextBtn) {
                nextBtn.disabled = currentPage >= totalPages;
            }
        }
        
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                window.location.href = 'login.html';
            }
        }
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化分页按钮状态
            updatePaginationButtons();
        });
    </script>
</body>
</html>
